<template>
  <view class="mine-container">
    <!-- 顶部背景 -->
    <view class="top-background">
      <view class="bg-pattern pattern-1"></view>
      <view class="bg-pattern pattern-2"></view>
      <view class="bg-pattern pattern-3"></view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-avatar-section">
        <view class="avatar-wrapper">
          <image 
            :src="userInfo.avatar || 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'"
            mode="aspectFill" 
            class="user-avatar"
            @tap="editProfile"
          ></image>
          <view class="avatar-ring"></view>
          <view class="camera-icon" @tap="changeAvatar">
            <uni-icons type="camera" size="14" color="#fff"></uni-icons>
          </view>
        </view>
        <view class="user-info-text">
          <text class="user-name">{{ userInfo.nickname || userInfo.username || '用户' }}</text>
          <view class="user-meta">
            <view class="user-level">
              <uni-icons type="vip-filled" size="16" color="#FFD700"></uni-icons>
              <text>VIP会员</text>
            </view>
            <text class="user-id">ID: {{ userInfo.id || '10086' }}</text>
          </view>
        </view>
      </view>
      
      <!-- 用户统计 -->
      <view class="user-stats">
        <view class="stat-item" @tap="toPoints">
          <text class="stat-number">{{ userStats.points || 0 }}</text>
          <text class="stat-label">积分</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item" @tap="toCoupons">
          <text class="stat-number">{{ userStats.coupons || 0 }}</text>
          <text class="stat-label">优惠券</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item" @tap="toWallet">
          <text class="stat-number">¥{{ parseFloat(userStats.balance || 0).toFixed(2) }}</text>
          <text class="stat-label">余额</text>
        </view>
      </view>
    </view>

    <!-- 快捷功能 -->
    <view class="quick-actions">
      <view class="action-item" @tap="toOrderList">
        <view class="action-icon order">
          <uni-icons type="list" size="24" color="#667eea"></uni-icons>
        </view>
        <text class="action-text">我的订单</text>
      </view>
      <view class="action-item" @tap="toFavorite">
        <view class="action-icon favorite">
          <uni-icons type="heart" size="24" color="#FF6B6B"></uni-icons>
        </view>
        <text class="action-text">我的收藏</text>
      </view>
      <view class="action-item" @tap="toAddress">
        <view class="action-icon address">
          <uni-icons type="location" size="24" color="#38A169"></uni-icons>
        </view>
        <text class="action-text">收货地址</text>
      </view>
      <view class="action-item" @tap="toService">
        <view class="action-icon service">
          <uni-icons type="chatbubble" size="24" color="#9370DB"></uni-icons>
        </view>
        <text class="action-text">客服中心</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-group">
        <view class="menu-item" @tap="toWallet">
          <view class="menu-icon wallet">
            <uni-icons type="wallet" size="20" color="#FF6B6B"></uni-icons>
          </view>
          <text class="menu-text">我的钱包</text>
          <view class="menu-extra">
            <text class="balance-text">¥{{ parseFloat(userStats.balance || 0).toFixed(2) }}</text>
            <uni-icons type="right" size="14" color="#CBD5E0"></uni-icons>
          </view>
        </view>
        
        <view class="menu-item" @tap="toPoints">
          <view class="menu-icon points">
            <uni-icons type="gift" size="20" color="#FFD700"></uni-icons>
          </view>
          <text class="menu-text">积分商城</text>
          <view class="menu-extra">
            <text class="points-text">{{ userStats.points || 0 }}积分</text>
            <uni-icons type="right" size="14" color="#CBD5E0"></uni-icons>
          </view>
        </view>
        
        <view class="menu-item" @tap="toCoupons">
          <view class="menu-icon coupon">
            <uni-icons type="paperplane" size="20" color="#9370DB"></uni-icons>
          </view>
          <text class="menu-text">优惠券</text>
          <view class="menu-extra">
            <view v-if="userStats.coupons > 0" class="coupon-badge">
              <text>{{ userStats.coupons }}</text>
            </view>
            <uni-icons type="right" size="14" color="#CBD5E0"></uni-icons>
          </view>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @tap="toInvite">
          <view class="menu-icon invite">
            <uni-icons type="person-add" size="20" color="#38A169"></uni-icons>
          </view>
          <text class="menu-text">邀请好友</text>
          <view class="menu-extra">
            <text class="invite-text">赚佣金</text>
            <uni-icons type="right" size="14" color="#CBD5E0"></uni-icons>
          </view>
        </view>
        
        <view class="menu-item" @tap="toHelp">
          <view class="menu-icon help">
            <uni-icons type="help" size="20" color="#667eea"></uni-icons>
          </view>
          <text class="menu-text">帮助中心</text>
          <view class="menu-extra">
            <uni-icons type="right" size="14" color="#CBD5E0"></uni-icons>
          </view>
        </view>
        
        <view class="menu-item" @tap="toSettings">
          <view class="menu-icon settings">
            <uni-icons type="gear" size="20" color="#718096"></uni-icons>
          </view>
          <text class="menu-text">设置</text>
          <view class="menu-extra">
            <uni-icons type="right" size="14" color="#CBD5E0"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐商品 -->
    <view class="recommend-section">
      <view class="recommend-header">
        <text class="recommend-title">为您推荐</text>
        <view class="more-btn" @tap="toRecommendList">
          <text>更多</text>
          <uni-icons type="right" size="12" color="#A0AEC0"></uni-icons>
        </view>
      </view>
      
      <scroll-view scroll-x="true" class="recommend-scroll" show-scrollbar="false">
        <view class="recommend-list">
          <view 
            v-for="(item, index) in recommendList"
            :key="index"
            class="recommend-item"
            @tap="toGoodsDetail(item.id)"
          >
            <view class="recommend-image-wrapper">
              <image :src="item.image" mode="aspectFill" class="recommend-image"></image>
              <view v-if="item.discount" class="recommend-discount">
                <text>{{ item.discount }}折</text>
              </view>
            </view>
            <text class="recommend-name">{{ item.name }}</text>
            <view class="recommend-price">
              <text class="current-price">¥{{ parseFloat(item.price || 0).toFixed(2) }}</text>
              <text v-if="item.originalPrice" class="original-price">¥{{ parseFloat(item.originalPrice || 0).toFixed(2) }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @tap="handleLogout">
        <uni-icons type="redo" size="18" color="#E53E3E"></uni-icons>
        <text>退出登录</text>
      </button>
    </view>

    <!-- 底部安全区域 -->
    <view class="bottom-safe"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        id: '10086',
        username: '农户小王',
        nickname: '农户小王',
        avatar: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
        phone: '138****8888'
      },
      userStats: {
        points: 1280,
        coupons: 3,
        balance: 156.80
      },
      recommendList: [
        {
          id: 1,
          name: '百泰 60%唑醚代森联',
          price: 99.00,
          originalPrice: 120.00,
          discount: 8.3,
          image: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
        },
        {
          id: 2,
          name: '亩旺特 螺虫乙酯',
          price: 168.50,
          originalPrice: 180.00,
          image: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
        },
        {
          id: 3,
          name: '农用复合肥',
          price: 45.00,
          originalPrice: 55.00,
          discount: 8.2,
          image: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
        }
      ]
    }
  },
  
  onLoad() {
    this.loadUserInfo()
    this.loadUserStats()
  },
  
  onShow() {
    // 刷新用户信息
    this.loadUserStats()
  },
  
  methods: {
    // 加载用户信息
    loadUserInfo() {
      const user = uni.getStorageSync('userInfo')
      if (user) {
        this.userInfo = { ...this.userInfo, ...user }
      }
    },

    // 加载用户统计
    loadUserStats() {
      // 模拟加载用户统计数据
      const stats = uni.getStorageSync('userStats') || this.userStats
      this.userStats = stats
    },

    // 编辑个人资料
    editProfile() {
      uni.navigateTo({
        url: '/src/pages/user/profile'
      })
    },

    // 更换头像
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 模拟上传头像
          uni.showLoading({
            title: '上传中...'
          })
          
          setTimeout(() => {
            uni.hideLoading()
            this.userInfo.avatar = res.tempFilePaths[0]
            uni.setStorageSync('userInfo', this.userInfo)
            
            uni.showToast({
              title: '头像更新成功',
              icon: 'success'
            })
          }, 1500)
        }
      })
    },

    // 跳转到订单列表
    toOrderList() {
      uni.navigateTo({
        url: '/src/pages/order/list'
      })
    },

    // 跳转到收藏
    toFavorite() {
      uni.navigateTo({
        url: '/src/pages/favorite/index'
      })
    },

    // 跳转到地址管理
    toAddress() {
      uni.navigateTo({
        url: '/src/pages/address/list'
      })
    },

    // 跳转到客服
    toService() {
      uni.showModal({
        title: '客服中心',
        content: '客服电话: 400-123-4567\n工作时间: 9:00-18:00',
        showCancel: false,
        confirmText: '知道了'
      })
    },

    // 跳转到钱包
    toWallet() {
      uni.navigateTo({
        url: '/src/pages/wallet/index'
      })
    },

    // 跳转到积分
    toPoints() {
      uni.navigateTo({
        url: '/src/pages/points/index'
      })
    },

    // 跳转到优惠券
    toCoupons() {
      uni.navigateTo({
        url: '/src/pages/coupon/list'
      })
    },

    // 跳转到邀请好友
    toInvite() {
      uni.navigateTo({
        url: '/src/pages/invite/index'
      })
    },

    // 跳转到帮助中心
    toHelp() {
      uni.navigateTo({
        url: '/src/pages/help/index'
      })
    },

    // 跳转到设置
    toSettings() {
      uni.navigateTo({
        url: '/src/pages/settings/index'
      })
    },

    // 跳转到推荐列表
    toRecommendList() {
      uni.switchTab({
        url: '/src/pages/index/index'
      })
    },

    // 跳转到商品详情
    toGoodsDetail(id) {
      uni.navigateTo({
        url: `/src/pages/goods/detail?id=${id}`
      })
    },

    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户信息
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('token')
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
            
            setTimeout(() => {
              uni.reLaunch({
                url: '/src/pages/login/index'
              })
            }, 1500)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.mine-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #F8FAFC 0%, #EDF2F7 100%);
  position: relative;
}

.top-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

.bg-pattern {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.pattern-1 {
  width: 200rpx;
  height: 200rpx;
  top: -50rpx;
  right: -50rpx;
  animation-delay: 0s;
}

.pattern-2 {
  width: 150rpx;
  height: 150rpx;
  top: 100rpx;
  left: -30rpx;
  animation-delay: 2s;
}

.pattern-3 {
  width: 120rpx;
  height: 120rpx;
  top: 200rpx;
  right: 100rpx;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(180deg);
  }
}

.user-card {
  position: relative;
  background: #fff;
  margin: 60rpx 30rpx 30rpx;
  border-radius: 30rpx;
  padding: 40rpx 30rpx 30rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.user-avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar-wrapper {
  position: relative;
  margin-right: 30rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid #fff;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
}

.avatar-ring {
  position: absolute;
  top: -8rpx;
  left: -8rpx;
  width: 136rpx;
  height: 136rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(102, 126, 234, 0.3);
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
}

.camera-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid #fff;
}

.user-info-text {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #2D3748;
  margin-bottom: 12rpx;
  display: block;
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.user-level {
  display: flex;
  align-items: center;
  padding: 6rpx 12rpx;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: 12rpx;
  
  text {
    font-size: 22rpx;
    color: #fff;
    font-weight: 500;
    margin-left: 4rpx;
  }
}

.user-id {
  font-size: 24rpx;
  color: #718096;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx 0;
  background: linear-gradient(135deg, #F7FAFC, #EDF2F7);
  border-radius: 20rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.stat-item:active {
  transform: scale(0.95);
}

.stat-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #2D3748;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #718096;
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: #CBD5E0;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.action-item:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.action-icon.order {
  background: linear-gradient(135deg, #E8F4FF, #D6EDFF);
}

.action-icon.favorite {
  background: linear-gradient(135deg, #FFE8E8, #FFD6D6);
}

.action-icon.address {
  background: linear-gradient(135deg, #E8F5E8, #D6F0D6);
}

.action-icon.service {
  background: linear-gradient(135deg, #F0E8FF, #E8D6FF);
}

.action-text {
  font-size: 24rpx;
  color: #4A5568;
  font-weight: 500;
}

.menu-section {
  padding: 0 30rpx;
  margin-bottom: 30rpx;
}

.menu-group {
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #F7FAFC;
  transition: background-color 0.2s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background: #F7FAFC;
}

.menu-icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.menu-icon.wallet {
  background: linear-gradient(135deg, #FFE8E8, #FFD6D6);
}

.menu-icon.points {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
}

.menu-icon.coupon {
  background: linear-gradient(135deg, #F0E8FF, #E8D6FF);
}

.menu-icon.invite {
  background: linear-gradient(135deg, #E8F5E8, #D6F0D6);
}

.menu-icon.help {
  background: linear-gradient(135deg, #E8F4FF, #D6EDFF);
}

.menu-icon.settings {
  background: linear-gradient(135deg, #F7FAFC, #EDF2F7);
}

.menu-text {
  flex: 1;
  font-size: 28rpx;
  color: #2D3748;
  font-weight: 500;
}

.menu-extra {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.balance-text,
.points-text,
.invite-text {
  font-size: 24rpx;
  color: #E53E3E;
  font-weight: 500;
}

.coupon-badge {
  background: #E53E3E;
  color: #fff;
  border-radius: 10rpx;
  padding: 2rpx 8rpx;
  font-size: 20rpx;
  min-width: 30rpx;
  text-align: center;
}

.recommend-section {
  padding: 0 30rpx;
  margin-bottom: 30rpx;
}

.recommend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.recommend-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #2D3748;
}

.more-btn {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background: #F7FAFC;
  border-radius: 16rpx;
  
  text {
    font-size: 24rpx;
    color: #718096;
    margin-right: 6rpx;
  }
}

.recommend-scroll {
  white-space: nowrap;
}

.recommend-list {
  display: flex;
  gap: 20rpx;
  padding-bottom: 20rpx;
}

.recommend-item {
  width: 200rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.recommend-item:active {
  transform: scale(0.95);
}

.recommend-image-wrapper {
  position: relative;
  margin-bottom: 12rpx;
}

.recommend-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
}

.recommend-discount {
  position: absolute;
  top: 6rpx;
  right: 6rpx;
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  color: #fff;
  font-size: 18rpx;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  font-weight: bold;
}

.recommend-name {
  font-size: 24rpx;
  color: #2D3748;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 8rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.recommend-price {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.current-price {
  font-size: 26rpx;
  color: #E53E3E;
  font-weight: bold;
}

.original-price {
  font-size: 20rpx;
  color: #A0AEC0;
  text-decoration: line-through;
}

.logout-section {
  padding: 0 30rpx 40rpx;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  width: 100%;
  padding: 24rpx;
  background: #fff;
  border: 2rpx solid #FED7D7;
  border-radius: 20rpx;
  font-size: 28rpx;
  color: #E53E3E;
  font-weight: 500;
  transition: all 0.3s ease;
}

.logout-btn:active {
  background: #FED7D7;
  transform: scale(0.98);
}

.logout-btn::after {
  border: none;
}

.bottom-safe {
  height: env(safe-area-inset-bottom);
  height: constant(safe-area-inset-bottom);
}
</style>    